<template>
	<!-- 顶部scroll view -->
	<scroll-view class="flex-no-wrap bg-white position-fixed w-100 d-flex white-space-nowrap" style="height: 100rpx;z-index: 99;" :scroll-x="true">
		<view class="display-inline-block mx-3" v-for="(item,index) in scrollList" @click="clickScrollItemFn(index)" :key="index">
			<text class="" :class="currentScrollItemIndex===index?'text-dark':'text-grey'">{{item.name}}</text>
			<view v-if="currentScrollItemIndex===index" class="w-50 mt-1"
				style="transform: translateX(50%);height: 6rpx;background-color: #00b4ae;"></view>
		</view>
	</scroll-view>
	<view style="height: 100rpx;">
		
	</view>
	<!-- 头部swiper -->
	<view class="w-100" style="height: 655rpx;">
		<swiper class="mt-2" style="height: 655rpx;" circular @change="headSwiperChange">
			<swiper-item v-for="(item,index) in headSwiperData.list" :key="index">
				<find-head-swiper-item :item="item"></find-head-swiper-item>
			</swiper-item>
		</swiper>
		<!-- 指示点 -->
		<view class="rowCenCen">
			<view class="bg-grey mt-3 mx-2 radius-100" style="height: 10rpx;"
				:style="'width:'+(headSwiperData.current===index?40:10)+'rpx'" v-for="(i,index) in  headSwiperData.list"
				:key="index"></view>
		</view>
	</view>
	
	<!-- list -->
	<view class="px-5">
		<!-- 头像部分 -->
		<view class="rowSta mt-5">
			<view class="text-vip position-relative" style="width: 80rpx;height: 80rpx;">
				<image class="radius-100" style="width: 80rpx;height: 80rpx;" src="../../static/find/news/4.jpg" mode="aspectFill"></image>
			</view>
			<text class="ml-2 font-weight-600 mt-1">哈落落</text>
			<text class=""></text>
		</view>
		<view class="my-2">NIO Life入驻Wallpaper全球首家设计商店</view>
		<!-- image -->
		<image style="width: 650rpx;height: 650rpx;" src="../../static/surprise/item.jpg" mode="aspectFill"></image>
		<view class="my-2 text-grey">
			02-15
		</view>
	</view>
	
</template>

<script setup lang="ts">
	import {
		ref,
		reactive
	} from 'vue'
	const currentScrollItemIndex = ref(0)
	const scrollList = reactive([{
			name: "推荐"
		},
		{
			name: "美食研究所"
		},
		{
			name: "微醺俱乐部"
		},
		{
			name: "服装配饰"
		},
		{
			name: "家具日用"
		},
		{
			name: "运动户外"
		},
		{
			name: "旅行箱包"
		},
		{
			name: "科技数码"
		},
		{
			name: "车模玩具"
		},
	])
	const clickScrollItemFn = (index) => {
		currentScrollItemIndex.value = index
	}
	const headSwiperData = reactive({
		current: 0,
		list: [{
				src: "/static/surprise/1.jpg",
				desc: "元宵情人双节至，悦享与你伴佳人",
				// avatar: "/static/find/avatar.jpg",
				// nickName: "悦享小队长",
				time: "02-13"
			},
			{
				src: "/static/surprise/2.jpg",
				desc: "情人节遇见元宵节，牛屋有「元」人就是你！",
				// avatar: "/static/find/avatar.jpg",
				// nickName: "悦享小队长",
				time: "02-13"
			}
		]
	})
	// 头部swiper改变
	const headSwiperChange = (e) => {
		// 需要改变对应当前的swiper指示点
		headSwiperData.current = e.detail.current
	}
</script>

<style>

</style>
